<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>中通钢管数据可视化</title>
    <link rel="shortcut icon " type="images/x-icon" href="../../static/common/logo.png">
    <script src="../../static/common/jquery-3.6.0.min.js"></script>
    <style type="text/css">
        table{
            margin: 50px auto;
        }
        table td{
            text-align: center;
        }
        table td, table th{
            width: 120px;
            border: solid 1px black;
        }
        table th{
            height: 50px;
        }
        body{
            background-image: url(../../static/down_and_fault/img/bg.jpg);
            background-repeat: no-repeat;
            background-attachment: fixed;
            background-size: 100%;
        }
    </style>
    <script>
        $(document).ready(function(){
            $("tr:gt(0) td:nth-child(8)").each(function(){
                if($(this).text() > 30){
                    $(this).parent().css('background-color','yellow');
                }
            });
        });
    </script>
</head>
<body>
    <table cellspacing="0">
        <tr>
            <th>日期</th><th>生产线</th><th>工序</th><th>设备</th><th>故障部位</th><th>开始时间</th><th>结束时间</th><th>停车时长</th><th style="width: 200px">故障描述</th><th style="width: 200px">故障处理结果</th><th>维修部门</th>
        </tr>
        {% for i in datalist %}
            <tr>
                <td>{{ i[0] }}</td><td>{{ i[1] }}</td><td>{{ i[2] }}</td><td>{{ i[3] }}</td><td>{{ i[4] }}</td><td>{{ i[5] }}</td><td>{{ i[6] }}</td><td>{{ i[7] }}</td><td style="width: 200px">{{ i[8] }}</td><td style="width: 200px">{{ i[9] }}</td><td>{{ i[10] }}</td>
            </tr>
        {% endfor %}
    </table>
</body>
</html>